import React from 'react';
import './style.less';
import {
    HashRouter,
    Route,
    Link,
    Switch
  }   from 'react-router-dom';
import GameApp from './GameApp';
  
  class Home extends React.Component {
    
    render(){
      return <div>
            <h2>首页</h2> 
            <div>
              <p>balabalbalbalbablablabal...</p>
              <p>balabalbalbalbablablabal...</p>
              <p>balabalbalbalbablablabal...</p>
            </div>
       </div>;
    }
  }
  
  
  class MyVideo extends React.Component {
    
    render(){
      return <div>
            <h2>我的视频</h2> 
            <div>
              <p>video1.avi...</p>
              <p>video2...</p>
              <p>video3...</p>
            </div>
       </div>;
    }
  }
  
  class MyPicture extends React.Component {
    
    render(){
      return <div>
            <h2>我的图片</h2> 
            <div>
              <p>.mmmabc.jpg..</p>
              <p>aabc.gif...</p>
              <p>def.png...</p>
            </div>
       </div>;
    }
  }
  
  
  class MyResume extends React.Component {
    
    render(){
      return <div>
            <h2>我的简历</h2> 
            <div>
              <p>技能：唱歌</p>
              <p>擅长：react，java，sql</p>
              <p>职业：前端工程师...</p>
            </div>
       </div>;
    }
  }
  
  class AboutMe extends React.Component {
    
    render(){
      return (
            <div className="about-me-wrap">
                <h2>关于我</h2> 
                <div className="container">
                  <div className="side">
                    <ul>
                      <li><Link to="/about/video">我的视频</Link></li>
                      <li><Link to="/about/picture">我的照片</Link></li>
                      <li><Link to="/about/resume">我的简历</Link></li>
                    </ul>
                   </div>
                  <div className="main">
                    <Switch>
                     <Route path="/about/video" component={MyVideo}/>
                     <Route path="/about/picture" component={MyPicture}/>
                     <Route path="/about/resume" component={MyResume}/>
                     <Route component={MyResume}/>
                    </Switch>
                  </div>
                </div>
           </div>
      );
    }
  }

  
  class App extends React.Component {
    
   render(){
      return (
          <HashRouter>
            <div className="app-wrap">
              <ul className="nav-header">
                <li><Link to="/index">首页</Link></li>
                <li><Link to="/about">关于我</Link></li>
                <li><Link to="/other">其他页面</Link></li>
              </ul>
              <div className="app-main">
                <Switch>
                  <Route path="/index" component={Home}/>
                  <Route path="/about" component={AboutMe} />
                  <Route path="/other" component={GameApp}/>
                  <Route component={GameApp}/>
                </Switch>
              </div>
            </div>
        </HashRouter>
      );
   }
  }
  

export default App;
//   ReactDOM.render(<App />,  document.getElementById('container'));